<template>
    <div>
        <div class="header">
            <span class="search-header">{{datalist.title}}</span>
            <svg t="1669451289405" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2640" width="16" height="16">
                <path
                    d="M544.316006 271.650957l0 53.611012c0 4.41045-2.957355 7.357572-7.357572 7.357572l-49.957809 0c-4.420683 0-7.316639-2.947122-7.316639-7.357572l0-53.611012c0-4.41045 2.895957-7.357572 7.316639-7.357572l49.957809 0C541.358651 264.293385 544.316006 267.240507 544.316006 271.650957z"
                    p-id="2641" fill="#d9d9d9"></path>
                <path
                    d="M542.842445 419.273109l0 337.148693c0 4.400217-2.947122 7.347339-7.357572 7.347339l-47.000454 0c-4.400217 0-7.347339-2.947122-7.347339-7.347339l0-337.148693c0-4.400217 2.947122-7.347339 7.347339-7.347339l47.000454 0C539.895323 411.92577 542.842445 414.872892 542.842445 419.273109z"
                    p-id="2642" fill="#d9d9d9"></path>
                <path
                    d="M1023.990786 511.994883c0 91.258447-24.313755 180.859138-70.311369 259.101129-5.730515 9.752108-18.266016 13.006222-28.007891 7.275707-9.752108-5.730515-13.006222-18.266016-7.275707-28.018124 42.303478-71.958892 64.662719-154.386206 64.662719-238.358713 0-63.59848-12.453636-125.293611-37.012985-183.356005-23.720238-56.087413-57.68377-106.464777-100.949156-149.730163-43.265386-43.265386-93.64275-77.239152-149.740396-100.95939-58.062394-24.559349-119.747291-37.002752-183.356005-37.002752s-125.293611 12.443403-183.356005 37.002752c-56.097646 23.720238-106.47501 57.694003-149.740396 100.95939s-77.228919 93.64275-100.949156 149.730163c-24.559349 58.062394-37.012985 119.757524-37.012985 183.356005 0 63.608713 12.453636 125.293611 37.012985 183.356005 23.720238 56.087413 57.68377 106.464777 100.949156 149.740396 43.265386 43.265386 93.64275 77.228919 149.740396 100.949156 58.062394 24.559349 119.747291 37.012985 183.356005 37.012985 117.946272 0 230.79648-43.797505 317.767274-123.308397 8.339946-7.623631 21.284769-7.040347 28.9084 1.299599s7.05058 21.284769-1.289366 28.9084c-94.533027 86.428442-217.196741 134.032646-345.386308 134.032646-69.114101 0-136.171356-13.538341-199.299115-40.246633-60.978816-25.787316-115.725698-62.697971-162.736385-109.708658s-83.921341-101.767801-109.708658-162.736385c-26.708292-63.127759-40.246633-130.185015-40.246633-199.299115s13.538341-136.161123 40.246633-199.299115c25.787316-60.968583 62.697971-115.715465 109.708658-162.736385 47.010687-47.010687 101.757568-83.921341 162.736385-109.708658 63.127759-26.698059 130.185015-40.2364 199.299115-40.2364s136.171356 13.538341 199.299115 40.2364c60.978816 25.787316 115.725698 62.697971 162.736385 109.708658 47.010687 47.02092 83.921341 101.767801 109.708658 162.736385C1010.442212 375.833761 1023.990786 442.880783 1023.990786 511.994883z"
                    p-id="2643" fill="#d9d9d9"></path>
            </svg>
        </div>
        <div class="main">
            <span class="main-title">{{datalist.num}}</span>
            <span class="main-content">{{datalist.percentage}}%
                <svg t="1669452490352" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="10061" width="16" height="16">
                    <path
                        d="M786.295467 485.000533l-6.126934 2.082134v-18.295467h6.024534l0.1024 16.213333zM221.5424 485.239467h-8.9088l-0.085333-16.247467 8.994133-0.512v16.759467z"
                        fill="#3fe955" p-id="10062"></path>
                    <path
                        d="M784.469333 480.290133L504.456533 178.978133a6.826667 6.826667 0 0 0-10.001066 0L214.459733 480.290133a6.826667 6.826667 0 0 0 5.922134 11.4176l158.1056-21.435733L358.4 853.333333v16.162134a6.826667 6.826667 0 0 0 6.826667 7.168h268.356266a6.826667 6.826667 0 0 0 6.826667-7.168l-0.119467-16.3328-19.848533-382.8736 158.122667 21.418666a6.826667 6.826667 0 0 0 5.922133-11.4176z"
                        fill="#3fe955" p-id="10063"></path>
                    <path
                        d="M191.3344 734.6176l103.031467 72.789333 103.048533-72.789333a127.197867 127.197867 0 0 0-206.097067 0z"
                        fill="#3fe955" p-id="10064"></path>
                    <path
                        d="M294.382933 681.984a127.010133 127.010133 0 0 1 103.048534 52.6336l-103.048534 72.789333-103.031466-72.789333a127.010133 127.010133 0 0 1 103.048533-52.6336m0-10.24a137.915733 137.915733 0 0 0-111.342933 56.849067 10.24 10.24 0 0 0 2.269866 14.2848l0.136534 0.1024L288.426667 815.786667a10.24 10.24 0 0 0 11.810133 0l103.031467-72.772267a10.24 10.24 0 0 0 2.4064-14.3872 137.915733 137.915733 0 0 0-111.342934-56.849067z"
                        fill="#3fe955" p-id="10065"></path>
                    <path d="M384.1536 444.142933h1.5872l-20.48 409.6h268.2368l-20.48-409.6" fill="#3fe955"
                        p-id="10066"></path>
                    <path
                        d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l20.48-409.6 5.239467 0.256v-6.826667h1.5872a6.826667 6.826667 0 0 1 6.826666 7.168l-20.1216 402.432H626.346667l-20.1216-402.432 13.653333-0.682666 20.48 409.6a6.826667 6.826667 0 0 1-6.826667 7.168z"
                        fill="#3fe955" p-id="10067"></path>
                    <path
                        d="M613.0176 446.276267l166.365867 22.545066L499.387733 167.509333 219.374933 468.821333l164.778667-22.545066"
                        fill="#3fe955" p-id="10068"></path>
                    <path
                        d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l19.968-399.240533-158.122667 21.435733a6.826667 6.826667 0 0 1-5.922133-11.4176L494.370133 162.8672a6.826667 6.826667 0 0 1 10.001067 0L784.384 464.213333a6.826667 6.826667 0 0 1-5.922133 11.4176l-158.122667-21.418666L640.3072 853.333333a6.826667 6.826667 0 0 1-6.826667 7.168z m-261.12-13.653333H626.346667L606.3104 446.634667a6.826667 6.826667 0 0 1 7.7312-7.099734l147.3536 19.950934L499.370667 177.493333 237.3632 459.485867l147.3536-19.968a6.826667 6.826667 0 0 1 7.7312 7.099733z"
                        fill="#3fe955" p-id="10069"></path>
                    <path
                        d="M557.3632 617.5744l149.5552 105.659733 149.572267-105.659733a184.644267 184.644267 0 0 0-299.1616 0z"
                        fill="#3fe955" p-id="10070"></path>
                    <path
                        d="M706.935467 541.184a184.32 184.32 0 0 1 149.572266 76.3904l-149.572266 105.659733-149.5552-105.659733a184.32 184.32 0 0 1 149.572266-76.3904m0-10.24a194.56 194.56 0 0 0-157.866666 80.622933 10.24 10.24 0 0 0 2.184533 14.2336l0.221867 0.1536 149.5552 105.659734a10.24 10.24 0 0 0 11.810133 0l149.5552-105.642667a10.24 10.24 0 0 0 2.4064-14.3872 194.56 194.56 0 0 0-157.866667-80.622933z"
                        fill="#3fe955" p-id="10071"></path>
                </svg>
            </span>
        </div>
        <div class="footer">
            <div class="footer-charts" ref="charts"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            myChart: null
        }
    },
    props: ['datalist'],
    mounted() {
        this.myChart = echarts.init(this.$refs.charts);
        this.myChart.setOption({
            xAxis: {
                // 隐藏x轴
                show: false,
                type: 'category'
            },
            yAxis: {
                // 隐藏y轴
                show: false
            },
            // 系列
            series: [
                {
                    type: 'line',
                    data: this.datalist.chartsData,
                    // 拐点样式设置
                    itemStyle: {
                        opacity: 0
                    },
                    // 线条的样式
                    lineStyle: {
                        // color: 'purple'
                    },
                    // 填充颜色
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(84, 112, 198, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,255,255,.6)'
                                },
                            ],
                            global: false
                        }
                    },
                    symbol: 'none',
                    smooth: true
                }
            ],
            // 布局调试
            grid: {
                left: 10,
                top: 10,
                right: 10,
                bottom: 10
            }
        })
    }
}
</script>

<style scoped>
.header {
    display: flex;
    align-items: center;
}

.search-header {
    margin-right: 10px;
    color: #9d9d9d;
    font-size: 15px;
}

.main {
    margin: 10px 0;
}

.main-title {
    margin-right: 30px;
}

.main-content {
    margin-right: 10px;
}

.footer-charts {
    width: 100%;
    height: 60px;
}
</style>